<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photo Demo</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="cache-control" content="no-cache" />

<script
    language="JavaScript"
    src="slider.js" >
</script>
<link
    href="default.css"
    rel="stylesheet"
    type="text/css" />

<script type="text/javascript">
<!--

// The global application object.
photo = {};

/**
 * Init is called when the document has completed loading.  It downloads the
 * Native Client modules.
 */
var initPhoto = function() {
  loadPhotoModule(document.getElementById('nacl_photo_content'));
}

/**
 * Called once the photo .nexe is loaded, this is the onload event handler
 * for the module's <embed> tag.
 */
moduleDidLoad = function() {
  photo.module = document.getElementById('photo_module');
  carpeInit();
  openPhotoFromUrl(document.getElementById('imageUrlForm').value);
}

/**
 * Load the Photo .nexe, this is done by injecting an <embed> tag into the
 * element that contains the Photo module.
 * @param {!Element} contentDiv The DOM Element object that will contain the
 *     NaCl module.
 */
loadPhotoModule = function(contentDiv) {
  var nexes = 'x86-32: photo_x86_32.nexe\n'
              + 'x86-64: photo_x86_64.nexe\n'
              + 'ARM: photo_arm.nexe ';
  contentDiv.innerHTML = '<embed name="photo_module" '
                         + 'id="photo_module" '
                         + 'width=640 height=480 '
                         // + nexes
                         + 'type="application/x-nacl-srpc" '
                         + 'dimensions="2" '
                         + 'onload=moduleDidLoad(); />';
  // Note: this code is here to work around a bug in Chromium build
  // #47357.  See also
  // http://code.google.com/p/nativeclient/issues/detail?id=500
  document.getElementById('photo_module').nexes = nexes;
}

/**
 * Notify the NaCl photo module that it needs to refresh its image cache.
 * @param {string} imageUrl The URL for the new image.  If |imageUrl| is nil or
 *    undefined, this throws an error and makes no changes to the DOM.
 */
var openPhotoFromUrl = function(imageUrl) {
  if (!imageUrl) {
    alert('openPhotoFromUrl(): bad parameter');
    return;
  }
  if (!photo.module) {
    alert('openPhotoFromUrl(): photo module not loaded');
    return;
  }
  // Setting this property will cause the photo module to initiate a GET on
  // |imageUrl|.
  photo.module.imageUrl = imageUrl;
}

/**
 * Helper functions for the Carpe sliders.
 * @param {number} s The slider value, whose range depends on the calling
 *     slider.
 */
var UpdateBlackPoint = function(s) {
  photo.module.setValueForKey(s, 'blackPoint');
}

var UpdateFill = function(s) {
  photo.module.setValueForKey(s, 'fill');
}

var UpdateBrightness = function(s) {
  photo.module.setValueForKey(s, 'brightness');
}

var UpdateContrast = function(s) {
  photo.module.setValueForKey(s, 'contrast');
}

var UpdateSaturation = function(s) {
  photo.module.setValueForKey(s, 'saturation');
}

var UpdateTemperature = function(s) {
  photo.module.setValueForKey(s, 'temperature');
}

var UpdateShadowsHue = function(s) {
  photo.module.setValueForKey(s, 'shadowsHue');
}

var UpdateShadowsSaturation = function(s) {
  photo.module.setValueForKey(s, 'shadowsSaturation');
}

var UpdateHighlightsHue = function(s) {
  photo.module.setValueForKey(s, 'highlightsHue');
}

var UpdateHighlightsSaturation = function(s) {
  photo.module.setValueForKey(s, 'highlightsSaturation');
}

var UpdateSplitPoint = function(s) {
  photo.module.setValueForKey(s, 'splitPoint');
}

var UpdateAngle = function(s) {
  photo.module.setValueForKey(s, 'angle');
}

var UpdateFineAngle = function(s) {
  photo.module.setValueForKey(s, 'fineAngle');
}

-->
</script>

</head>

<body onload="initPhoto();" id="body_id" bgcolor="#D3D3D3" >
<h1>Native Client Photo Editing Demo</h1>

<form id="getfileform">
  <input type=text
         id="imageUrlForm"
         value="sunspots.jpg"
         onchange="openPhotoFromUrl(this.value);">
  <input type=button
         id="openPhoto"
         value="Open"
         onclick="openPhotoFromUrl(document.getElementById('imageUrlForm').value);">
  Open a photo and develop it in this miniature darkroom!
</form>

<table>
  <tr>
    <td>
      <!-- The photo area; contains a div for the NaCl photo module as well as
      a <canvas> used to display the image.  The Canvas object is handed to the
      NaCl photo module for processing. -->
      <div id="nacl_photo_content"></div>
    </td>
    <td valign="top">
      <!-- Begin Carpe sliders { -->
      <table width="500px" cellspacing="0px" cellpadding="0px" >
        <tr>
          <td>Exposure</td>
        </tr>
        <tr>
          <td>
          <div class="carpe_horizontal_slider_display_combo">
            <div class="carpe_horizontal_slider_track">
              <div class="carpe_slider_slit">&nbsp;</div>
              <div class="carpe_slider"
                  id="slider1"
                  orientation="horizontal"
                  distance="100"
                  display="display1"
                  updatefnc="UpdateBlackPoint"
                  style="left: 0px;">&nbsp;</div>
            </div>
            <div class="carpe_slider_display_holder" style="width: 44px">
              <input class="carpe_slider_display"
                  id="display1"
                  style="width: 40px"
                  name="sliderBlackPoint"
                  type="text"
                  from="0"
                  to="100"
                  valuecount="101"
                  value="0"
                  typelock="off" />
            </div>
          </div>
          &nbsp;Black Point
          </td>
        </tr>
        <tr>
          <td>
          <div class="carpe_horizontal_slider_display_combo">
            <div class="carpe_horizontal_slider_track">
              <div class="carpe_slider_slit">&nbsp;</div>
              <div class="carpe_slider"
                  id="slider2"
                  orientation="horizontal"
                  distance="100"
                  display="display2"
                  updatefnc="UpdateFill"
                  style="left: 0px;">&nbsp;</div>
            </div>
            <div class="carpe_slider_display_holder" style="width: 44px">
              <input class="carpe_slider_display"
                  id="display2"
                  style="width: 40px"
                  name="sliderFill"
                  type="text"
                  from="0"
                  to="100"
                  valuecount="101"
                  value="0"
                  typelock="off" />
            </div>
          </div>
          &nbsp;Fill
          </td>
        </tr>
        <tr>
          <td>
          <div class="carpe_horizontal_slider_display_combo">
            <div class="carpe_horizontal_slider_track">
              <div class="carpe_slider_slit">&nbsp;</div>
              <div class="carpe_slider"
                  id="slider3"
                  orientation="horizontal"
                  distance="100"
                  display="display3"
                  updatefnc="UpdateBrightness"
                  style="left: 50px;">&nbsp;</div>
            </div>
            <div class="carpe_slider_display_holder" style="width: 44px">
              <input class="carpe_slider_display"
                  id="display3"
                  style="width: 40px"
                  name="sliderBrightness"
                  type="text"
                  from="0"
                  to="200"
                  valuecount="201"
                  value="100"
                  typelock="off" />
            </div>
          </div>
          &nbsp;Brightness
          </td>
        </tr>

        <tr>
          <td>
          <div class="carpe_horizontal_slider_display_combo">
            <div class="carpe_horizontal_slider_track">
              <div class="carpe_slider_slit">&nbsp;</div>
              <div class="carpe_slider"
                  id="slider4"
                  orientation="horizontal"
                  distance="100"
                  display="display4"
                  updatefnc="UpdateContrast"
                  style="left: 50px;">&nbsp;</div>
            </div>
            <div class="carpe_slider_display_holder" style="width: 44px">
              <input class="carpe_slider_display"
                  id="display4"
                  style="width: 40px"
                  name="sliderContrast"
                  type="text"
                  from="0"
                  to="200"
                  valuecount="201"
                  value="100"
                  typelock="off" />
            </div>
          </div>
          &nbsp;Contrast
          </td>
        </tr>

        <tr>
          <td>
          <div class="carpe_horizontal_slider_display_combo">
            <div class="carpe_horizontal_slider_track">
              <div class="carpe_slider_slit">&nbsp;</div>
              <div class="carpe_slider"
                  id="slider0"
                  orientation="horizontal"
                  distance="100"
                  display="display0"
                  updatefnc="UpdateSaturation"
                  style="left: 50px;">&nbsp;</div>
            </div>
            <div class="carpe_slider_display_holder" style="width: 44px">
              <input class="carpe_slider_display"
                  id="display0"
                  style="width: 40px"
                  name="sliderSaturation"
                  type="text"
                  from="0"
                  to="200"
                  valuecount="201"
                  value="100"
                  typelock="off" />
            </div>
          </div>
          &nbsp;Saturation
          </td>
        </tr>
        <tr>
          <td>
          <div class="carpe_horizontal_slider_display_combo">
            <div class="carpe_horizontal_slider_track">
              <div class="carpe_slider_slit">&nbsp;</div>
              <div class="carpe_slider"
                  id="slider5"
                  orientation="horizontal"
                  distance="100"
                  display="display5"
                  updatefnc="UpdateTemperature"
                  style="left: 50px;">&nbsp;</div>
            </div>
            <div class="carpe_slider_display_holder" style="width: 44px">
              <input class="carpe_slider_display"
                  id="display5"
                  style="width: 40px"
                  name="sliderTemperature"
                  type="text"
                  from="-2000"
                  to="2000"
                  valuecount="4001"
                  value="0"
                  typelock="off" />
            </div>
          </div>
          &nbsp;Tempurature
          </td>
        </tr>
      </table>
    <br>
    <table width="500px" cellspacing="0px" cellpadding="0px" >
      <tr>
        <td>Split Tone Control</td>
      </tr>
      <tr>
        <td>
        <div class="carpe_horizontal_slider_display_combo">
          <div class="carpe_horizontal_slider_track">
            <div class="carpe_slider_slit">&nbsp;</div>
            <div class="carpe_slider"
                id="slider6"
                orientation="horizontal"
                distance="100"
                display="display6"
                updatefnc="UpdateShadowsHue"
                style="left: 0px;">&nbsp;</div>
          </div>
          <div class="carpe_slider_display_holder" style="width: 44px">
            <input class="carpe_slider_display"
                id="display6"
                style="width: 40px"
                name="sliderShadowsHue"
                type="text"
                from="0"
                to="1000"
                valuecount="1001"
                value="0"
                typelock="off" />
          </div>
        </div>
        &nbsp;Shadows Hue
        </td>
      </tr>
      <tr>
        <td>
        <div class="carpe_horizontal_slider_display_combo">
          <div class="carpe_horizontal_slider_track">
            <div class="carpe_slider_slit">&nbsp;</div>
            <div class="carpe_slider"
                id="slider7"
                orientation="horizontal"
                distance="100"
                display="display7"
                updatefnc="UpdateShadowsSaturation"
                style="left: 0px;">&nbsp;</div>
          </div>
          <div class="carpe_slider_display_holder" style="width: 44px">
            <input class="carpe_slider_display"
                id="display7"
                style="width: 40px"
                name="sliderShadowsSaturation"
                type="text"
                from="0"
                to="100"
                valuecount="101"
                value="0"
                typelock="off" />
          </div>
        </div>
        &nbsp;Shadows Saturation
        </td>
      </tr>
      <tr>
        <td>
        <div class="carpe_horizontal_slider_display_combo">
          <div class="carpe_horizontal_slider_track">
            <div class="carpe_slider_slit">&nbsp;</div>
            <div class="carpe_slider"
                id="slider8"
                orientation="horizontal"
                distance="100"
                display="display8"
                updatefnc="UpdateHighlightsHue"
                style="left: 0px;">&nbsp;</div>
          </div>
          <div class="carpe_slider_display_holder" style="width: 44px">
            <input class="carpe_slider_display"
                id="display8"
                style="width: 40px"
                name="sliderHighlightsHue"
                type="text"
                from="0"
                to="1000"
                valuecount="1001"
                value="0"
                typelock="off" />
          </div>
        </div>
        &nbsp;Highlights Hue
        </td>
      </tr>
      <tr>
        <td>
        <div class="carpe_horizontal_slider_display_combo">
          <div class="carpe_horizontal_slider_track">
            <div class="carpe_slider_slit">&nbsp;</div>
            <div class="carpe_slider"
                id="slider9"
                orientation="horizontal"
                distance="100"
                display="display9"
                updatefnc="UpdateHighlightsSaturation"
                style="left: 0px;">&nbsp;</div>
          </div>
          <div class="carpe_slider_display_holder" style="width: 44px">
            <input class="carpe_slider_display"
                id="display9"
                style="width: 40px"
                name="sliderHighlightsSaturation"
                type="text"
                from="0"
                to="100"
                valuecount="101"
                value="0"
                typelock="off" />
          </div>
        </div>
        &nbsp;Highlights Saturation
        </td>
      </tr>
      <tr>
        <td>
        <div class="carpe_horizontal_slider_display_combo">
          <div class="carpe_horizontal_slider_track">
            <div class="carpe_slider_slit">&nbsp;</div>
            <div class="carpe_slider"
                id="slider10"
                orientation="horizontal"
                distance="100"
                display="display10"
                updatefnc="UpdateSplitPoint"
                style="left: 50px;">&nbsp;</div>
          </div>
          <div class="carpe_slider_display_holder" style="width: 44px">
            <input class="carpe_slider_display"
                id="display10"
                style="width: 40px"
                name="sliderSplitPoint"
                type="text"
                from="-100"
                to="100"
                valuecount="201"
                value="0"
                typelock="off" />
          </div>
        </div>
        &nbsp;Split Point
        </td>
      </tr>
    </table>
    <br>
    <table width="500px" cellspacing="0px" cellpadding="0px" >
      <tr>
        <td>Geometry</td>
      </tr>
      <tr>
        <td>
        <div class="carpe_horizontal_slider_display_combo">
          <div class="carpe_horizontal_slider_track">
            <div class="carpe_slider_slit">&nbsp;</div>
            <div class="carpe_slider"
                id="slider11"
                orientation="horizontal"
                distance="100"
                display="display11"
                updatefnc="UpdateAngle"
                style="left: 50px;">&nbsp;</div>
          </div>
          <div class="carpe_slider_display_holder" style="width: 44px">
            <input class="carpe_slider_display"
                id="display11"
                style="width: 40px"
                name="sliderAngle"
                type="text"
                from="-45"
                to="45"
                valuecount="91"
                value="0"
                typelock="off" />
          </div>
        </div>
        &nbsp;Angle
        </td>
      </tr>
      <tr>
        <td>
        <div class="carpe_horizontal_slider_display_combo">
          <div class="carpe_horizontal_slider_track">
            <div class="carpe_slider_slit">&nbsp;</div>
            <div class="carpe_slider"
                id="slider12"
                orientation="horizontal"
                distance="100"
                display="display12"
                updatefnc="UpdateFineAngle"
                style="left: 50px;">&nbsp;</div>
          </div>
          <div class="carpe_slider_display_holder" style="width: 44px">
            <input class="carpe_slider_display"
                id="display12"
                style="width: 40px"
                name="sliderFineAngle"
                type="text"
                from="-200"
                to="200"
                valuecount="401"
                value="0"
                typelock="off" />
          </div>
        </div>
        &nbsp;Fine Angle
        </td>
      </tr>
    </table>
  </td><!-- } End Carpe sliders -->
  </tr>
</table>

Sliders by
<a href="http://carpe.ambiprospect.com/slider/" style="color: lightblue">
CARPE Design
</a>
<br>
<br>
</body>
</html>
